import React, { useState } from 'react';
import styles from './index.less';
import { CaretLeftOutlined, CaretRightOutlined } from '#/utils/antdIcons.js';

const TjCollapse = (props) => {
  const { left, right, leftStyles, rightStyles } = props;
  const [isFullScreenEcharts, setIsFullScreenEcharts] = useState(false),
    [isFullScreenTable, setIsFullScreenTable] = useState(false);

  const getClassName = () => {
    let classNameEcharts = styles.charts;
    let classNameTable = styles.table;
    if (isFullScreenEcharts) {
      classNameEcharts = `${styles.charts} ${styles.chartsFullWidth}`;
      classNameTable = `${styles.table} ${styles.tableNoWidth}`;
    } else if (isFullScreenTable) {
      classNameEcharts = `${styles.charts} ${styles.chartsNoWidth}`;
      classNameTable = `${styles.table} ${styles.tableFullWidth}`;
    }

    return {
      classNameEcharts,
      classNameTable,
    };
  };

  return (
    <>
      <div className={getClassName().classNameEcharts} style={{ ...leftStyles }}>
        <div
          className={styles.leftArrow}
          onClick={() => {
            setIsFullScreenEcharts(!isFullScreenEcharts);
          }}
        >
          {isFullScreenEcharts ? <CaretLeftOutlined /> : <CaretRightOutlined />}
        </div>
        {left}
      </div>
      <div className={getClassName().classNameTable} style={{ ...rightStyles }}>
        <div
          className={styles.rightArrow}
          onClick={() => {
            setIsFullScreenTable(!isFullScreenTable);
          }}
        >
          {isFullScreenTable ? <CaretRightOutlined /> : <CaretLeftOutlined />}
        </div>
        {right}
      </div>
    </>
  );
};

export default TjCollapse;
